<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格操作</title>
</head>
<style>
    div{
        text-align: center;
        font-size: 15px;
        color: pink;
    }
    table {
        width: 100%;
        border: 2px solid red;
        border-collapse: collapse;
        border-spacing: 0px;
        text-align: center;
        color: orange;
    }

    table td {
        border: 2px solid red;
        height: 30px;
    }
    #btn{
        margin-bottom: 30px;
        color: pink;
        border-radius: 20px;
        border: none;
        padding: 5px;
    }
    #num1,#num2{
        color: red;
        padding: 5px 0;
        border-radius: 20px;
        border: 1px solid blue;
        text-align: center;

    }
</style>
</head>
<body>
<div>
    <h1>表格操作</h1>
    <label for="num1">行：</label>
    <input type="text" id="num1">
    <label for="num2">列：</label>
    <input type="text" id="num2">
    <input type="button" value="生成" id="btn">
</div>

<table>
    <!-- <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody> -->
</table>
<script>
    // 获取元素
    var btn = document.querySelector('#btn');
    // table 获取
    var output = document.querySelector('table');
    //给元素绑定点击事件
    btn.onclick = function () {
// 行数和列数
        var row = num1.value;
        var col = num2.value;
        // 清空 行数和列数
        num1.value = '';
        num2.value = '';
        render(row, col, output);
        // 事件委托
        var tbody = document.querySelector('tbody');
        // 绑定点击事件
        tbody.onclick = function (e) {
            // 查看dom对象的详细信息
            if (e.target.className == 'copy') {
                var copyTr = e.target.parentNode.parentNode.cloneNode(true);
                e.target.parentNode.parentNode.after(copyTr);
            }
            if (e.target.className == 'del') {
                e.target.parentNode.parentNode.remove();
            }
        }
    }
    function render(row, col, table) {
        if (row && col) {
            table.innerHTML = '';
            var tbody = document.createElement('tbody');
            for (var i = 0; i < row; i++) {

                var tr = document.createElement('tr');
                if (i % 2 === 0) {
                    // 判断奇数行和偶数行
                    tr.style.background = '#58bc58';
                }else{
                    tr.style.background = 'yellow';
                }
                for (var j = 0; j < col; j++) {
                    var td = document.createElement('td');
                    td.innerHTML = '单元格' + i + j;
                    // 每生成一个td,就把td放到tr里面
                    tr.appendChild(td);
                    if (i % 2 !== 0) {
                    // 判断奇数行和偶数行
                    td.style.background = 'pink';
                }else{
                    td.style.background = 'blue';
                }
                }
                // 每一行都会多一个列出来，而是在col循环完之后多出来的列
                // 需要在内层循环结束之后去添加这一列
                var newTd = document.createElement('td');
                var copy = document.createElement('button');
                copy.innerText = '复制';
                copy.className = 'copy';
                newTd.appendChild(copy);
                var del = document.createElement('button');
                del.innerText = '删除';
                del.className = 'del';
                newTd.appendChild(del);
                tr.appendChild(newTd)
            // 把tr放入tbody里面
                tbody.appendChild(tr);
            }
            table.appendChild(tbody);
            // 把tbody放到table里面
        } else {
            alert('你还没有输入行和列！')
        }
    }
</script>
</body>
</html>